<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="row  border-bottom white-bg dashboard-header">
        <div class="col-sm-12">
        </div>
        <div class="col-sm-4" style="background-color: darkgoldenrod;">
            <div style="height: 230px">
                <label style="font-size: large;margin-top: 30px;">今日新增学生</label>
                <div style="text-align: center;margin-top: -30px;">
                    <b><span id="todayStuCount" style="font-size: 150px;" th:text="*{todayStuCount}"></span></b>
                </div>
            </div>
        </div>
        <div class="col-sm-4" style="background-color: #1cc09f;">
            <div style="height: 230px">
                <label style="font-size: large;margin-top: 30px;">今日新开班级</label>
                <div style="text-align: center;margin-top: -30px;">
                    <b><span id="todayClassCount" style="font-size: 150px;" th:text="*{todayClassCount}"></span></b>
                </div>
            </div>
        </div>
        <div class="col-sm-4" style="background-color: #f3c17a;">
            <div style="height: 230px">
                <label style="font-size: large;margin-top: 30px;">学校总学生数量</label>
                <div style="text-align: center;margin-top: -30px;">
                    <b><span id="stuCount" style="font-size: 150px;" th:text="*{stuCount}"></span></b>
                </div>
            </div>
        </div>

    </div>
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">

                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>统计信息</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="chart3" style="width:100%; height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>

    <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
        var ctx = [[@{/}]];
        var monthArr = [[${monthList}]];
        var amountArr = [[${amountList}]];
        var monthAmount = new Array();

        var option = {
            backgroundColor: '#001848',
            xAxis: {
                type: 'category',
                axisTick:{
                    show:false,
                },
                boundaryGap: false,
                axisTick:{
                    show:false,
                },
                axisLabel:{
                    color:'#fff'
                },
                axisLine:{
                    lineStyle:{
                        color:'rgba(12,102,173,.5)',
                        width:2,
                    }
                },
            },
            yAxis: {
                type: 'value',
                axisTick:{
                    show:false,//不显示刻度线
                },
                axisLabel:{
                    color:'#fff'  //y轴上的字体颜色
                },
                axisLine:{
                    lineStyle:{
                        width:2,
                        color:'rgba(12,102,173,.5)',//y轴的轴线的宽度和颜色
                    }
                },
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    type:'line',
                    symbol: 'none',
                    smooth:true,
                    itemStyle: {
                        normal: {
                            color: '#09b0f5',
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#09b0f5'
                            }, {
                                offset: 1,
                                color: 'rgba(12,102,173,.5)'
                            }])
                        }
                    },
                }
            ]
        };
        console.log(monthArr);
        console.log(amountArr);
        option.xAxis.data = monthArr;
        option.series[0].data = amountArr;
        var chart3 = echarts.init(document.getElementById('chart3'));
        chart3.setOption(option);
        $(window).resize(chart3.resize);
    </script>
</body>
</html>
